<template>
  <div>
    <p class="title">核销记录</p>
    <div class="search-box">
      <div class="select-box">
        <span v-for="item in select" @click="handelSelect(item.id)"
          :class="{'active': selected==item.id?true:false}">{{item.text}}</span>

      </div>
      <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>

    </div>
    <div class="total-price">核销金额：1000000元</div>
    <!-- 表格 -->
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" >

      <el-table-column label="序号" width="80" type="index"></el-table-column>
      <el-table-column prop="activeNum" label="名称" width="120">
      </el-table-column>
      <el-table-column prop="activeName" label="价格" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="activeType" label="核销时间" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="applyTime" label="核销用户" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="activeTime" label="手机号" show-overflow-tooltip>
      </el-table-column>

    </el-table>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        select: [
          { text: '今天', id: 1 },
          { text: '近7天', id: 7 },
          { text: '近30天', id: 30 },

        ],
        selected: 1,
        currentPage: 1,
        tableData: [
          {
            num: "1",
            activeNum: "王小虎",
            activeName: "上海市普陀区金沙江路 1518 弄",
            activeType: "22222",
            applyTime: "22222",
            activeTime: "2222",
            activePlan: "2222",
            activePrice: "2222",
            activeNum: "2222",
            activeState: "222"
          },
          {
            num: "2",
            activeNum: "王小虎",
            activeName: "上海市普陀区金沙江路 1517 弄",
            activeType: "22222",
            applyTime: "22222",
            activeTime: "2222",
            activePlan: "2222",
            activePrice: "2222",
            activeNum: "2222",
            activeState: "222"
          },
          {
            num: "3",
            activeNum: "王小虎",
            activeName: "上海市普陀区金沙江路 1519 弄",
            activeType: "22222",
            applyTime: "22222",
            activeTime: "2222",
            activePlan: "2222",
            activePrice: "2222",
            activeNum: "2222",
            activeState: "222"
          },
          {
            num: "4",
            activeNum: "王小虎",
            activeName: "上海市普陀区金沙江路 1516 弄",
            activeType: "22222",
            applyTime: "22222",
            activeTime: "2222",
            activePlan: "2222",
            activePrice: "2222",
            activeNum: "2222",
            activeState: "222"
          },
        ],

      };
    },

    methods: {

      handelSelect(id) {
        this.selected = id
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .search-box {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
  }

  .select-box {
    margin-right: 32px;
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 20px;

    span {
      padding: 10px;
      cursor: pointer;

    }

    span:nth-child(1) {
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;

    }

    span:nth-child(2) {
      border-left: 1px solid #ccc;
      border-right: 1px solid #ccc;
    }

    span:nth-child(3) {
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;

    }

    .active {
      color: #fff;
      background: #aeaeae;

    }
  }

  .total-price {
    margin-bottom: 32px;
    font-size: 18px;
  }
</style>